<template>
  <div class="person">
    <h1>情况二：监视【对象类型数据】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>姓名：{{ person.age }}</h2>
    <button @click="changeName">点击修改姓名</button>
    <button @click="changeAge">点击修改年龄</button>
    <button @click="changePerson">点击修改人物</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { ref, watch } from 'vue'
  // 数据
  let person = ref({
    name: '张三',
    age: 18
  })
  // 方法
  function changeName() {
    person.value.name += '~'
  }
  function changeAge() {
    person.value.age += 1
  }
  function changePerson() {
    person.value = {name:'李四', age:23}
  }
  // 监视
  // 第一个参数为被监视对象
  // 第二个参数为回调函数
  // 第三个参数为配置对象（deep, immediate...）
  watch(person, (newValue, oldValue) => {
    console.log('person变化了', newValue, oldValue);
  }, {deep:true})
</script> 

<style scoped>
  .person {
      background-color: skyblue;
      box-shadow: 0 0 10px;
      border-radius: 10px;
      padding: 20px;
  }

  button {
    margin: 0 5px;
  }
</style>